<template>
  <el-dialog title="菜单权限设置" width="70%" v-model="visible" destroy-on-close @closed="$emit('closed')">
    <el-container style="height: 50vh">
      <el-header style="margin-bottom: 17px">
        <div class="left-panel">
          <el-button icon="el-icon-plus" @click="all_check">全选/全不选</el-button>
          <el-button type="primary" icon="el-icon-edit-pen" :disabled="disableBtn" @click="batch_divide">权限分配</el-button>
        </div>
      </el-header>
      <el-main class="nopadding">
        <el-tree class="menu-tree" @check="checkNode" ref="menu" :data="menuList" show-checkbox node-key="id" :props="defaultProps">
          <template #default="{ node, data }">
            <span class="custom-tree-node">
              <span class="label-wrap">
                <el-icon><component :is="data.icon" /></el-icon>
                <span class="label">
                  {{ node.label }}
                </span>
              </span>
              <span class="do">
                <el-tag class="auth-tag" v-for="tag in data.tags" @close="handleClose(tag,data)" :key="tag.name" closable :type="tag.type">
                  {{ tag.nickName }}
                </el-tag>
              </span>
            </span>
          </template>
        </el-tree>
      </el-main>

    </el-container>
	  <select-dialog ref="selectDialog" @success="userInfo"></select-dialog>

  </el-dialog>
</template>
<script>
import selectDialog from "@/views/system/member/select.vue";
export default {
  components:{
	  selectDialog
  }	,
  data() {
    return {
      visible: false,
      selection: [],
      defaultProps: {
        children: "children",
        label: "label"
      },
	  // 应用ID
	  appId:null,
	  // 分配按钮是否显示
	  disableBtn:true,
	  nodeUserList:[],
      menuList: [
        {
          id: 1,
          label: "测试菜单1",
          tags: [{ name: "a" }, { name: "admin" }],
          icon: "el-icon-chat-square",
          children: [
            { id: 100, label: "用户管理", tags: [{ name: "a" }, { name: "admin" }], icon: "el-icon-chat-square" },
            { id: 104, label: "岗位管理", tags: [{ name: "a" }, { name: "admin" }], icon: "el-icon-chat-square" },
            { id: 101, label: "角色管理", tags: [{ name: "a" }, { name: "admin" }], icon: "el-icon-chat-square" },
            { id: 11, label: "部门管理", tags: [{ name: "a" }, { name: "admin" }], icon: "el-icon-chat-square" },
            { id: 2084, label: "前台用户", tags: [{ name: "a" }, { name: "admin" }], icon: "el-icon-chat-square" }
          ]
        },
        { id: 2061, label: "测试菜单2", tags: [{ name: "a" }, { name: "admin" }], icon: "el-icon-chat-line-square" },
        { id: 501, label: "测试菜单3", icon: "el-icon-discount" }
      ]
    }
  },
  methods: {
    // 显示
    open() {
      this.visible = true
    },
    // 全选
    all_check() {
		let checkedKeys = this.$refs.menu.getCheckedKeys();
		if (checkedKeys.length > 0){
			// 全不选
			this.$refs.menu.setCheckedNodes([])
		}else {
			// 全选
			this.$refs.menu.setCheckedNodes(this.menuList)
		}

    },
    // 批量分配
    batch_divide() {
		this.$nextTick(() => {
			this.$refs.selectDialog.open(null,"menu",null);
		})
	},
    // 批量删除
    batch_remove() {},
    // 添加权限
    addAuth(node, data) {
      console.log(node, data)
	  this.addDeveloper();
    },
	 // 获取应用菜单
	 async getAppMenu() {
		let res = await this.$API.app.menu.list.get(this.appId);
		if (res.code == 200){
			this.menuList = res.data;
		}
	 },
	  selectHandle(type, data){
		 this.$refs.select.select(type,data)
	  },
	  //选择节点
	  checkNode(){
		  var checkedNodes = this.$refs.menu.getCheckedNodes();
		  if (checkedNodes.length > 0){
			  this.disableBtn = false;
		  }else {
			  this.disableBtn =true;
		  }
		  console.log(this.disableBtn)
	  },
	  //获取选中人员
	  async userInfo(data) {
		  let forms = []
		  var checkedNodes = this.$refs.menu.getCheckedNodes();
		  for (let i = 0; i < checkedNodes.length; i++) {
			  data.map((item)=>{
				  checkedNodes[i].tags.push(item) ;
				  let form = {
					  menuId: checkedNodes[i].id,
					  userId: item.memberId,
					  userName: item.nickName,
					  appId: this.appId
				  }
				  forms.push(form)
			  })
		  }
		  // 保存
		  let res = await this.$API.app.menu.addMenuRole.post(forms);
		  if (res.code == 200){
			  this.$message.success("保存成功")
		  }else {
			  this.$message.error("保存失败")
		  }
	  },
	  // 删除
	  async handleClose(tag, data) {
		  let res = await this.$API.app.menu.del.delete(tag);
		  if (res.code == 200){
			  data.tags.splice(data.tags.indexOf(tag), 1);
			  this.$message.success("删除成功");
		  }else {
			  this.$message.error("删除失败");
		  }

	  },
  },
  created() {
	  this.appId = this.$route.query.appId
	  this.getAppMenu();
  }

}
</script>

<style lang="scss" scoped>
.menu-tree {
  width: 100%;
}
.menu-tree:deep(.el-tree-node.is-expanded > .el-tree-node__children) {
  margin-top: 10px;
}
.menu-tree:deep(.el-tree-node__content) {
  margin-bottom: 10px;
}
.menu-tree:deep(.el-tree-node__expand-icon) {
  padding-left: 10px;
}
.menu-tree:deep(.el-tree-node__label) {
  display: flex;
  flex: 1;
  height: 100%;
}
.custom-tree-node {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  height: 100%;
  padding-right: 10px;
}
.custom-tree-node .label {
  display: flex;
  align-items: center;
  height: 100%;
  margin-left: 3px;
}

.custom-tree-node .label-wrap {
  display: flex;
  align-items: center;
  height: 100%;
  margin-left: 5px;
}

.custom-tree-node .label-wrap .el-icon svg {
  transform: translateY(1px);
}

.custom-tree-node .label .el-tag {
  margin-left: 5px;
}
.custom-tree-node .do .auth-tag {
  padding: 10px;
  margin-right: 10px;
  font-size: 14px;
}
.custom-tree-node .do i {
  margin-left: 5px;
  color: #999;
}
.custom-tree-node .do i:hover {
  color: #333;
}

.custom-tree-node:hover .do {
  display: inline-block;
}
</style>
